<template>
    <div>
        <el-form :model="updateParam" :rules="rules" ref="updateRef" style="margin: 0 auto;width: 800px">
            <el-form-item label="用户昵称" label-width="130px" prop="nickName">
                <el-input v-model="updateParam.nickName" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="所属学校" label-width="130px" prop="schoolUuid">
                <el-select v-model="updateParam.schoolUuid" class="m-2" placeholder="请选择学校"
                           size="large"
                           @change="selectExamineStatus">
                    <el-option
                        v-for="item in data.schools"
                        :key="item.uuid"
                        :label="item.name"
                        :value="item.uuid"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="性别" label-width="130px" prop="sex">
                <el-select v-model="updateParam.sex" class="m-2" placeholder="请选择性别"
                           size="large"
                           @change="selectExamineStatus">
                    <el-option
                        v-for="item in sexs"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" label-width="130px" prop="disabled">
                <el-select v-model="updateParam.disabled" class="m-2" placeholder="请选择是否禁用"
                           size="large"
                           @change="selectExamineStatus">
                    <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="用户背景图" label-width="130px" prop="backgroundImage">
                <el-upload
                    :show-file-list="false"
                    :action="data.uploadAction"
                    :limit="1"
                    :on-success="uploadSuccess"
                    :headers="{'AUTH_TOKEN':data.authToken}"
                    name="image"
                >
                    <el-image style="width: 100px; height: 100px" :src="updateParam.backgroundImage"
                              fit="cover"/>
                </el-upload>
            </el-form-item>
            <el-form-item label-width="130px">
                <el-button @click="submit" type="primary">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {reactive, ref, onMounted} from "vue";
import {detail, update} from "@/api/user/user";
import {useRoute,useRouter} from "vue-router";
import {all} from "@/api/school/school";
import {basicData} from "@/utils/common";
import {getToken} from "@/utils/auth";
import {ElMessage} from "element-plus";

export default {
    setup() {
        const data = reactive({
            schools: [],
            uploadAction: basicData.uploadUrl,
            authToken: getToken()
        })
        const route = useRoute();
        const router = useRouter();
        const sexs = [
            {
                value: 1,
                label: '男'
            },
            {
                value: 2,
                label: '女'
            },
            {
                value: 3,
                label: '未知'
            }
        ]
        const status = [
            {
                value: true,
                label: '禁用'
            },
            {
                value: false,
                label: '启用'
            }
        ]
        const updateParam = reactive({
            nickName: '',
            schoolUuid: '',
            sex: '',
            disabled: '',
            backgroundImage: ''
        })
        const rules = reactive({
            nickName: [
                {
                    required: true,
                    message: "请输入昵称",
                    trigger: "blur",
                },
            ],
            schoolUuid: [
                {
                    required: true,
                    message: "请选择学校",
                    trigger: "blur",
                },
            ],
            sex: [
                {
                    required: true,
                    message: "请选择性别",
                    trigger: "blur",
                },
            ],
            disabled: [
                {
                    required: true,
                    message: "请选择状态",
                    trigger: "blur",
                },
            ],
            backgroundImage: [
                {
                    required: true,
                    message: "请上传背景图",
                    trigger: "blur",
                },
            ],
        })
        const updateRef = ref(null)
        /**
         * 获取用户信息
         */
        const getUserDetail = () => {
            detail(route.query.uuid).then(res => {
                updateParam.nickName = res.data.nickName
                updateParam.sex = res.data.sex
                updateParam.schoolUuid = res.data.schoolUuid
                updateParam.disabled = res.data.disabled
                updateParam.backgroundImage = res.data.backgroundImage
            })
        }
        /**
         * 获取所有学校
         */
        const getAllSchool = () => {
            all().then(res => {
                data.schools = res.data
            })
        }
        /**
         * 图片上传成功后
         */
        const uploadSuccess = (response) => {
            if (response.code !== 0) {
                ElMessage({
                    message: response.msg,
                    type: 'danger',
                })
            } else {
                ElMessage({
                    message: '上传成功',
                    type: 'success',
                })
                updateParam.backgroundImage = response.data
            }
        }
        const submit = () => {
            updateRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                update(updateParam, route.query.uuid).then(() => {
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    router.push("/user")
                })
            })
        }
        onMounted(() => {
            getUserDetail()
            getAllSchool()
        })
        return {
            data,
            sexs,
            status,
            rules,
            updateRef,
            updateParam,
            uploadSuccess,
            submit
        }
    }
}
</script>